<style>
    .wancheng-content {
        margin-bottom: 0px;
        background-color: #DEE9F5;
        font-size: 12px;
        min-height: 435px;
    }
    .wancheng-content .wancheng-card {
        margin-bottom: 0px;
        background-color: #DEE9F5;
        border-bottom: 1px solid #D2D2D2;
    }
    .wancheng-card .blockTitle {
        color: #296ECA;
        padding-left: 35px;
    }
    .wancheng-card .blockTitle .title-icon {
        width: 18px;
        height: 18px;
        line-height: 12px;
        left: 15px;
        color: #5DC5DC;
    }
    .wancheng-card .title-more {
        float: right;
        cursor: pointer;
    }
    .wancheng-card .chart-content {
        width: 100%;
        height: 170px;
    }
    .wancheng-card .c-full-chart {
        display: inline-block;
        width: 100%;
        height: 175px;
    }
    .wancheng-card .paiming-title {
        height: 30px;
        line-height: 30px;
        color: #333333;
    }
    .wancheng-card .paiming-content {
        width: 100%;
        height: 170px;
        padding-top: 5px;
    }
    .wancheng-card .c-paiming-item {
        height: 34px;
        width: 100%;
        line-height: 34px;;
        position: relative;
    }
    .wancheng-card .c-paiming-item .title {
        display: inline-block;
        width: 105px;
        text-align: right;
    }
    .wancheng-card .c-paiming-item .title .top {
        display: inline-block;
        width: 40px;
        text-align: right;
        color:#5DAAF3;
    }
    .wancheng-card .c-paiming-item .title .shi {
        display: inline-block;
        width: 65px;
        text-align: right;
    }
    .wancheng-card .c-paiming-item .line {
        display: inline-block;
        width: 235px;
    }
    .wancheng-card .c-task-number {
        position: absolute;
        right: 10px;
        top: 0px;
        line-height: 10px;
    }
</style>
<div class="wancheng-content">
    <div class="layui-card wancheng-card">
        <div class="layui-card-header blockTitle">
            <i class="layui-icon layui-icon-form title-icon"></i>
            任务完成情况
            <span class="title-more">MORE</span>
        </div>
        <div class="layui-card-body">
            <div class="chart-content">
                <div id="i-full-chart" class="c-full-chart"></div>
            </div>
        </div>
    </div>
    <div class="layui-card wancheng-card">
        <div class="layui-card-header paiming-title">
            任务完成进度排名
        </div>
        <div class="layui-card-body" style="padding: 0px;">
            <div id="i-paiming-content" class="paiming-content">
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="wanchengEmergengcyTpl">
    {{#  if(!!d.tops && d.tops.length && d.tops.length > 0){
        $.each(d.tops, function(index, item) {
            var top = 'TOP'+(index+1),
            showName = item.name.length > 5 ? item.name.substring(0,5)+'.' : item.name;
    }}
        <div class="c-paiming-item">
            <span class="c-task-number">7</span>
            <div class="title"><span class="top">{{top}}</span><span class="shi" lay-tips="{{item.name}}">{{showName}}</span></div>
            <div class="line">
                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-red" lay-percent="{{item.number}}%"></div>
                </div>
            </div>
        </div>
    {{#  
        })
            } 
    }}
</script>
<script>
    layui.use(['admin','echarts','element'], function(){
        var $ = layui.$,
        admin = layui.admin,
        echarts = layui.echarts,
        router = layui.router(),
        laytpl = layui.laytpl,
        element = layui.element,
        isIEEight = false;
    
        var DEFAULT_VERSION = 8.0;  
        var ua = navigator.userAgent.toLowerCase();  
        var isIE = ua.indexOf("msie")>-1;  
        var safariVersion;  
        if(isIE){  
            safariVersion =  ua.match(/msie ([\d.]+)/)[1];  
        }  
        if(safariVersion <= DEFAULT_VERSION ){ 
            isIEEight = true;
        /*  alert('系统检测到您正在使用ie8以下内核的浏览器，不能实现完美体验，请更换或升级浏览器访问！'); */
        };
    
        var fullChart = echarts.init(document.getElementById('i-full-chart'));
        
        var data = {name: '任务完成度进度统计',value: 54};
    
        setChart(fullChart, data);

        var tops = [
            {'name': '石家庄市', 'number': '100'},
            {'name': '呼和浩特市', 'number': '76'},
            {'name': '广西壮族自治区', 'number': '56'},
            {'name': '石家庄市', 'number': '30'},
            {'name': '石家庄市', 'number': '12'}
        ];

        var getTpl = wanchengEmergengcyTpl.innerHTML;
        var viewHtml = document.getElementById('i-paiming-content');
        laytpl(getTpl).render({tops: tops}, function(html){
            viewHtml.innerHTML = html;
            element.render();
        });
    
    
        function setChart(chart, data) {
            if(!!isIEEight) {
                colorObject = [[1, '#5C9EFF']];
            }else {
                colorObject = [
                    [1, new echarts.graphic.LinearGradient(
                        0, 1, 0, 0,
                        [{
                            offset: 0,
                            color: '#5CA8F6'
                        }, {
                            offset: 0.8,
                            color: '#60E2BC'
                        }]
                    )]
                ]
            };
            var option = {
                title: {
                    text: '任务完成度统计',
                    textAlign: 'center',
                    left: '50%',
                    bottom: '-6px',
                    textStyle: {
                        fontSize: 14
                    }
                },
                series: [
                    {
                        type: 'gauge',
                        name: '外层辅助',
                        radius: '100',
                        startAngle: '180',
                        endAngle: '0',
                        splitNumber: '120',
                        center: ['50%', '65%'],
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [{
                            value: 1
                        }],
                        title: {
                            show: true,
                            offsetCenter: [0, 10],
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [1, 'rgb(0,191,255)']
                                ],
                                width: 8,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 20,
                            lineStyle: {
                                color: '#051932',
                                width: 0,
                                type: 'solid',
                            }
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        name: '内层数据刻度',
                        type: 'gauge',
                        radius: '90',
                        startAngle: 180,
                        endAngle: 0,
                        splitNumber: 4,
                        center: ['50%', '65%'],
                        axisLine: {
                            lineStyle: {
                                width: 20,
                                color: colorObject
                            }
                        },
                        splitLine: {
                            length: 12,
                            lineStyle: {
                                width: 2,
                                color: '#ffffff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                width: 2,
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            color: 'rgb(0,191,255)',
                            distance: -40,
                            fontSize: 12
                        },
                        detail: {
                            show: true,
                            offsetCenter: ['0','30%'],
                            fontSize: 12,
                            color: 'rgb(0,191,255)'
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgb(0,191,255)'
                            }
                        },
                        pointer: {
                            width: 6,
                            length: '95%'
                        },
                        data: [{
                            value: 10
                        }],
                        silent: false
                    },
                    {
                        name: '最内层线',
                        type: 'gauge',
                        radius: '40',
                        center: ['50%', '65%'],
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                opacity: 0,
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            length: 2,
                            lineStyle: {
                                color: '#00b3ff',
                                width: 3,
                                type: 'solid'
                            }
                        },
                        detail: {
                            show: false
                        },
                        pointer: {
                            show: false
                        }
                    }
                ]
            };
            chart.setOption(option);
        }
});
</script>